<template>
  <div>
    <div class="margin-container-list">
      <!--顶部搜索 -->
      <div class="top-operate">
        <div class="inline-flex">
          <el-select v-model="textCol" class="width-120">
            <el-option label="商品名称" value="goodsTitle"></el-option>
            <el-option label="商品Id" value="goodsId"></el-option>
            <el-option label="skuId" value="skuId"></el-option>
            <el-option label="商品货号" value="goodsCode"></el-option>
            <el-option label="外部编码" value="externalCode"></el-option>
          </el-select>
          <el-input v-model="textValue" placeholder="请输入内容" class="width-200"></el-input>
        </div>
        <el-select v-model="defaultQuery.changeContent" placeholder="异动内容" clearable class="pad-l-10 width-120">
          <el-option v-for="(val, key) in dict.changeContent" :key="key" :label="val" :value="key"></el-option>
        </el-select>
        <el-select v-model="defaultQuery.changeType" placeholder="异动类型" clearable class="pad-l-10 width-120">
          <el-option v-for="(val, key) in dict.changeType" :key="key" :label="val" :value="key"></el-option>
        </el-select>
        <el-select v-model="defaultQuery.changeWarehouseId" placeholder="异动仓库" clearable class="pad-l-10">
          <el-option v-for="(item, index) in warehouseList" :key="index" :label="item.warehouseName" :value="item.warehouseId"></el-option>
        </el-select>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button @click="doResetSearch">重置</el-button>
        </el-button-group>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column width="200px" label="商品名称" prop="goodsTitle" fixed="left">
          </el-table-column>
          <el-table-column min-width="220px" label="商品编码">
            <template slot-scope="scope">
              <div>Id：{{ scope.row.goodsId }}</div>
              <div>货号：{{ scope.row.goodsCode }}</div>
              <div>条码：{{ scope.row.goodsBarCode }}</div>
              <div>外部编码：{{ scope.row.externalCode }}</div>
            </template>
          </el-table-column>
          <el-table-column width="220px" label="sku详情" prop="skuDetail">
            <template slot-scope="scope">
              <template v-if="scope.row.skuId">
                <div>Id：{{ scope.row.skuId }}</div>
                <div>描述：{{ scope.row.skuDetail }}</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column width="160px" label="异动时间" prop="createTime" align="center">
          </el-table-column>
          <el-table-column width="120px" label="异动内容" align="center">
            <template slot-scope="scope">
              <div>{{ dict.changeContent[scope.row.changeContent] }}</div>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="异动类型" align="center">
            <template slot-scope="scope">
              <div>{{ dict.changeType[scope.row.changeType] }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column width="120px" label="业务类型" align="center">
            <template slot-scope="scope">
              <div>{{ dict.changeBusinessType[scope.row.changeBusinessType] }}</div>
            </template>
          </el-table-column> -->
          <el-table-column width="120px" label="异动数量" prop="changeNum" align="left">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.changeBeforeNum > scope.row.changeAfterNum" class="font-red">-{{ scope.row.changeNum }}</span>
                <span v-else class="font-green">{{ scope.row.changeNum }}</span>
              </div>
              <div>前：{{ scope.row.changeBeforeNum }}</div>
              <div>后：{{ scope.row.changeAfterNum }}</div>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="异动仓库" prop="changeWarehouseName" align="left">
          </el-table-column>
          <el-table-column width="260px" label="操作详情" prop="operatorContent">
          </el-table-column>
          <el-table-column width="120px" label="操作人" prop="operatorName">
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import { listWarehouseInfo } from '@/api/warehouse/warehouseInfo'
  import { pageStockLog } from '@/api/goods/goodsStockLog'

  export default {
    data() {
      return {
        // 文本model
        textCol: 'goodsTitle',
        textValue: '',
        // 查询条件
        searchListQuery: {},
        // 默认条件
        defaultQuery: {
          enterpriseId: '',
          currentPage: 1,
          size: 10,
          changeWarehouseId: '',
          changeContent: '',
          changeType: ''
        },
        // 数据字典
        dict: {
          changeType: {},
          changeContent: {},
          changeBusinesstype: {}
        },
        // 仓库集合
        warehouseList: [],
        total: 0,
        listLoading: false,
        dataList: [],
        multipleSelection: []
      }
    },
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      // 获取仓库列表
      listWarehouseInfo({ enterpriseId: this.getEnterpriseId() }).then((response) => {
        this.warehouseList = response.data
      })
      this.initList()
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        pageStockLog(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
          this.dict = response.data.dict
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>